<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>  
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
	String uid = request.getParameter("uid");
	String tapesId = request.getParameter("tapesId");
	String type = request.getParameter("type");
%>
<html>
	<head>
		<meta charset="utf-8">
		<title>博约分享</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="<%=basePath %>share/css/style.css" />
	</head>
	<body>
		<div class="open">
			<table width="100%">
				<tr>
					<td class="imgTd">
						<img src="<%=basePath %>share/img/logo.png">
					</td>
					<td class="btnTd">
						<a href="<%=basePath %>View/download/dw_for_mo.do" class="openBtn" id="openBtn"></a>
					</td>
				</tr>
			</table>
		</div><!--open-->
		<div class="user">
			
			<div class="imgBox">
				
			</div><!--imgBox-->
			
			<div class="audio">
				<div class="playBtn" id="playBtn"></div>
				<div id="loadVal">音频加载中...</div>
				<div>
					<table width="100%">
						<tr>
							<td id="startTime">00:00</td>
							<td class="lengthTd">
								<source>
									<audio src="" id="audio"></audio>
								</source>
								<input type='range' min='0' max='' value='0' id='range' /> 
							</td>
							<td id="endTime">00:00</td>
						</tr>
					</table>
				</div>
			</div>
		</div><!--user-->
		
		<div class="info">
			<table width="100%">
				<tr>
					<td width="100px">
						<div class="userBox">
							<div class="icon">
								<img src="<%=basePath %>share/img/iconB.png" id="head"/>
							</div>
						</div>
					</td>
					<td class="textTd">
						<b id="userName"></b>
						<p id="userSignature"></p>
					</td>
				</tr>
			</table>
		</div><!--info-->
	</body>
	<script type="text/javascript" src="<%=basePath %>share/js/jquery-2.1.4.min.js" ></script>
	<script>
	$(function(){
		if ($(window).width()>900){
			 location.href = '<%=basePath%>/View/share/audioPc.do?uid=<%=uid%>&tapesId=<%=tapesId%>&type=<%=type%>';
		}
	})
	//ajax请求数据并设置---------------------------------------------------------------------
	$(function(){
		$.ajax({
			url:'<%=basePath%>User/sharePage.do',
			data:{'uid':<%=uid%>,'tapesId':<%=tapesId%>,'type':<%=type%>},
			dataType:'json',
			type:'POST',
			success:function(val){
				var shareJson = {
						"code":val.code,
						"data":{
							"tapesUrl":val.data.url,
							"sex":val.data.sex,
							"headUrl":val.data.headUrl,
							"userName":val.data.nickName,
							"tapesName":val.data.tapesName,
							"userSignature":val.data.userSignature,
							"imgList":val.data.imglist
						},
						"message":val.message,
					}
					if(shareJson.data.imgList!=null){
						html='';
						$.each(shareJson.data.imgList,function(index,comment){
							html=html+'<img src="'+comment+'" />';
						})
						$('.imgBox').html(html);
					}else {
						$('.imgBox').html('<img src="<%=basePath %>share/img/pcbg.jpg"/>')
					}
					//头像地址
					if(shareJson.data.headUrl){
						document.getElementById('head').setAttribute('src',shareJson.data.headUrl);
					}else{
						if(shareJson.data.sex=='男'){
							document.getElementById('head').setAttribute('src','<%=basePath %>share/img/iconB.png');
						}else{
							document.getElementById('head').setAttribute('src','<%=basePath %>share/img/icon.png');
						}
					}
					//设置音频路径
					document.getElementById('audio').setAttribute('src',shareJson.data.tapesUrl);
					//头部姓名
					document.getElementById('userName').innerText=shareJson.data.userName;
					//顶部标题
					//document.getElementById('headName').innerText=shareJson.data.tapesName;
					//用户签名
					if (shareJson.data.userSignature){
						document.getElementById('userSignature').innerText=shareJson.data.userSignature;						
					}else {
						document.getElementById('userSignature').innerText='一起来国学吧!'
					}

			}
		})
	})
	//图片轮播--------------------------------------------------------------------------
	var timer;
	var index = 1;
	function imgScroll(statue){
		if(statue=='play'){
			var length = $('.imgBox img').length-1;
			timer = setInterval(function(){//定时器
				$('.imgBox img').hide();
				$('.imgBox img').eq(index).fadeIn(300);
				console.log(index);
				index>=length?index=0:index++;
			},3000)
		}else if(statue=='pause'){
			clearInterval(timer);//清除轮播定时器
		}
		
	}
	//播放控制----------------------------------------------------------------
		var  Audio = document.getElementsByTagName("audio")[0];
		//播放与暂停
        document.getElementById('playBtn').onclick=function(){//播放与暂停
        	if (Audio.paused) {  
                Audio.play();  
               document.getElementById('playBtn').className='playBtn bgchange';
           } else if (Audio.played) {  
                Audio.pause();  
                document.getElementById('playBtn').className='playBtn';
            };  
        }
        
        
        //将秒数转为00:00格式   
		function timeToStr(time) {  
		    var m = 0,   
		    s = 0,   
		    _m = '00',   
		    _s = '00';   
		    time = Math.floor(time % 3600);   
		    m = Math.floor(time / 60);   
		    s = Math.floor(time % 60);   
		    _s = s < 10 ? '0' + s : s + '';   
		    _m = m < 10 ? '0' + m : m + '';   
		    return _m + ":" + _s;   
		} 
		
		//当音频可以播放的时候
		 Audio.addEventListener('canplay', function () {
		 	document.getElementById('loadVal').innerText='准备完毕';
		 })
		//当媒体从因缓冲而引起的暂停时候
		 Audio.addEventListener('waiting', function () {
		 	document.getElementById('loadVal').innerText='努力加载中...';
		 })
		
		
		 Audio.addEventListener('timeupdate', function () { //播放时
		 	document.getElementById('loadVal').innerText='播放中...';
		 	var allTime = Audio.duration;//全部时长
		 	var currentTime = Audio.currentTime;//当前时长
		 	document.getElementById('range').max=allTime.toFixed(0);//滑动条设置全部时长
		 	document.getElementById('range').value=currentTime.toFixed(0);//滑动条显示当前时长
		    document.getElementById('startTime').innerText = timeToStr(currentTime);//开始时间
		    document.getElementById('endTime').innerText = timeToStr(allTime);//结束时间
		   });  
		
       document.getElementById('range').onchange=function(){//拖动滑动条
       	 Audio.currentTime=this.value; 
       }
       //播放结束
	     Audio.addEventListener('ended', function () {
	     	 document.getElementById('playBtn').className='playBtn';//显示暂停按钮
	     	 document.getElementById('loadVal').innerText='点击重播...';
	     })
     //判断是否存在本app-------------------------------------------------------------------
     
    document.getElementById('openBtn').onclick = function(e){  
        // 通过iframe的方式试图打开APP，如果能正常打开，会直接切换到APP，并自动阻止a标签的默认行为  
        // 否则打开a标签的href链接  
        var ifr = document.createElement('iframe');  
        ifr.src = 'com.weixin://';  
        ifr.style.display = 'none';  
        document.body.appendChild(ifr);  
        window.setTimeout(function(){  
            document.body.removeChild(ifr);  
        },3000)  
    };  
	</script>
</html>
